<template>
  <div>
    <h3>Vue3自定义指令</h3>
    <button v-perm="'sys:user:save'">添加用户</button>-
    <button v-perm="'sys:user:update'">修改用户</button>-
    <button v-perm="'sys:user:delete'">删除用户</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Course8-11',
  data() {
    return {
      msg: 'aaa',
      permList: ['sys:user:save',"sys:user:update"]
    }
  },
  directives: { // 自定义指令
    perm: { // 定义一个名为perm的指令
      created() {
        console.log("perm-created")
      },
      mounted(el,bindding) {
        console.log(bindding.value)
        console.log("perm-mounted")
        // 这里的bindding.instance为当前vue实例，也就是前面用到的this
        // 因为这里的this指向和前面的this指向不一样，所以这里不能使用this
        if(bindding.instance.permList.includes(bindding.value)) {
          // 存在权限修改颜色
          el.style.background='red'
        } else {
          el.remove()
        }
      }
    }
  },
  created() {// 这个是vue实例创建的时候执行
    console.log("created")
    // eslint-disable-next-line no-debugger
    // debugger
  },
  mounted() {// vue实例挂载到Dom节点时执行
    console.log("mounted")
    // eslint-disable-next-line no-debugger
    // debugger
  }
}
</script>

<style>

</style>